html {
  font-size: 100px;
}

@media screen and (min-width: 640px) and (max-width: 1920px) {
  img[alt] {
    font-size: .25rem;
  }
  .root-Page {
    width: 100%;
    background: #FFFFFF;

    .banner {
      width: 100%;
      height: 6.06rem;
      background: url("../img/背景@2x.png") no-repeat center;
      background-size: cover;
      position: relative;

      img#logo {
        position: absolute;
        top: .17rem;
        left: 0;
        right: 0;
        width: 1.94rem;
        height: .68rem;
        z-index: 5;
        margin: auto;
      }

      .options {
        display: none;
      }
    }

    header {
      padding: 0 10%;
      height: .89rem;
      line-height: .89rem;
      display: flex;
      background-color: #FCCD26;

      ul.menu-list {
        flex: 1;
        height: inherit;
        overflow: hidden;
        display: flex;
        font-size: .28rem;
        color: #020202;
        font-weight: bold;

        li.menu {
          flex: 1;
          height: 100%;
          text-align: center;

          &:hover {
            cursor: pointer;
          }

          &.active {
            color: #FFFFFF;
          }
        }
      }

      .options {
        display: flex;
        align-items: center;

        i.icon {
          display: inline-block;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;

          &.wx-icon {
            width: .37rem;
            height: .28rem;
            margin-right: .27rem;
            background-image: url("../img/微信@2x.png");
          }

          &.wb-icon {
            width: .39rem;
            height: .31rem;
            margin-right: .42rem;
            background-image: url("../img/微博@2x.png");
          }
        }

        button.lang {
          display: inline-block;
          height: .39rem;
          line-height: .33rem;
          padding: 0 .15rem;
          font-size: .25rem;
          border: .03rem solid #070002;
          border-radius: .10rem;
          background: transparent;
          box-sizing: border-box;

          i.arrow {
            display: inline-block;
            width: 0;
            height: 0;
            border-width: .18rem .16rem 0;
            border-style: solid;
            border-color: #070002 transparent transparent;
            margin-left: .10rem;
          }
        }
      }
    }

    .main {
      width: 100%;

      .page-title {
        width: 56%;
        margin: .64rem auto;
        display: flex;
        align-items: center;

        span.line {
          flex: 1;
          height: .06rem;
          background: #FAC324;
        }

        h1 {
          color: #020202;
          font-size: .47rem;
          margin: 0 .38rem;
        }
      }

      .item-page-1 {
        width: 100%;
        position: relative;
        background: url("../img/bg-1@2x.png") no-repeat bottom right;
        background-size: 6.86rem 7.36rem;

        .content {
          width: 36%;
          margin: .95rem auto .90rem;
          font-size: .25rem;
          color: #020202;
          line-height: .50rem;
          text-align: justify;
          p {
            font-size: .25rem
          }

          //p.item-content1 {
          //  margin-bottom: .50rem;
          //}
          //
          //span.title {
          //  font-weight: 500;
          //}
          //
          //span.text {
          //  font-weight: 300;
          //}
        }

        .code {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: .70rem;

          .item-code {
            width: 1.16rem;
            margin-right: 8%;

            &:last-of-type {
              margin: 0;
            }

            p {
              font-size: .18rem;
              text-align: center;
              color: #020202;
              line-height: .32rem;
            }

            img {
              border: .03rem solid #FAC324;
              border-radius: .05rem;
            }
          }
        }

        picture.ad {
          position: absolute;
          left: 6%;
          top: 0;
          bottom: 0;
          width: 4.02rem;
          height: 5.88rem;
          margin: auto;
          z-index: 5;
        }
      }

      .item-page-2 {
        width: 56%;
        margin: 0 auto;

        ul.show-list {
          width: 100%;

          li.show {
            width: 100%;
            display: flex;

            .main-img {
              width: 52.5%;
            }

            .main-context {
              width: 47.5%;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              text-align: center;
              //align-items: center;
              align-content: center;
              color: #000000;
              position: relative;

              picture.decoration {
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 5;

                &.decoration-1 {
                  right: 0;
                  width: 4.24rem;
                  height: 5.94rem;
                }

                &.decoration-2 {
                  left: 0;
                  width: 4.02rem;
                  height: 4.52rem;
                }

                &.decoration-3 {
                  right: 0;
                  width: 5.00rem;
                  height: 5.28rem;
                }

                &.decoration-4 {
                  left: 0;
                  width: 5.24rem;
                  height: 5.42rem;
                }
              }

              h2 {
                font-size: .44rem;
                font-weight: bold;
                margin-bottom: .50rem;
              }

              .text {
                width: 100%;
                font-size: .22rem;
                line-height: .35rem;
              }
            }
          }

          li.series {
            margin-top: .73rem;
            width: 100%;

            h2 {
              font-size: .44rem;
              font-weight: bold;
              margin-bottom: .50rem;
              text-align: center;
            }

            .series-img {
              padding-top: .73rem;
              background-position: center;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              overflow: hidden;

              &.series-img-1 {
                height: 4.40rem;
                display: flex;
                justify-content: flex-start;
                background-image: url("../img/小食系列@2x.png");
              }

              &.series-img-2 {
                height: 4.38rem;
                display: flex;
                justify-content: flex-end;
                background-image: url("../img/鲜果系列@2x.png");
              }

              .series-text {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 58%;
                height: 100%;
                font-size: .15rem;
                color: #000;
                line-height: .20rem;
                text-align: center;
              }
            }
          }
        }
      }

      .item-page-3 {
        width: 56%;
        margin: 0 auto;
        .swiper-container {
          width: 100%;
          //height: 5.66rem;
          font-size: .3rem;
        }
      }

      .item-page-4 {
        width: 100%;
        background: url("../img/bg-2@2x.png") no-repeat bottom left;
        background-size: 6.41rem 7.00rem;

        .page-title {
          width: 31.5%;
        }

        .item-page-wrapper {
          width: 56%;
          margin: 0 auto;

          p.call {
            color: #020202;
            font-size: .33rem;
            text-align: center;
            padding: .59rem 0 .54rem;
          }
        }
      }
    }

    footer {
      width: 100%;
      padding: .89rem 0;
      background: #FAC324;

      .footer-wrapper {
        width: 58%;
        margin: 0 auto;

        .tips {
          font-size: .19rem;
          color: #020202;
          line-height: .28rem;
          font-weight: 400;
          text-align: center;
        }

        .bottom {
          width: 100%;
          display: flex;
          margin-top: 1.33rem;

          .code {
            width: 50%;
            display: flex;
            align-items: center;

            .item-code {
              width: 1.22rem;
              margin-right: 12%;

              &:last-of-type {
                margin: 0;
              }

              p {
                font-size: .19rem;
                text-align: center;
                color: #020202;
                line-height: .32rem;
              }

              img {
                border: .03rem solid #FAC324;
                border-radius: .05rem;
              }
            }
          }

          .info {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            font-size: .19rem;
            color: #020202;
            text-align: right;

            p {
              width: 100%;
            }
          }
        }
      }
    }

    .back-top {
      position: fixed;
      bottom: 10%;
      right: 5%;
      z-index: 10;
      width: .78rem;
      display: none;
      flex-wrap: wrap;

      img {
        cursor: pointer;

        &.backTop {
          margin-bottom: .11rem;
        }
      }

      .wxCode {
        display: none;
        position: absolute;
        left: -0.8rem;
        bottom: 0;
        z-index: 10;
        width: .78rem;
        height: .78rem;
      }
    }
  }
}


@media screen and (min-device-width: 320px) and (max-device-width: 641px) {
  img[alt] {
    font-size: .12rem;
  }
  .root-Page {
    width: 100%;
    background: #FFFFFF;

    .banner {
      width: 100%;
      height: 2.50rem;
      background: url("../img/mobile/banner@2x.png") no-repeat center;
      position: relative;

      img#logo {
        position: absolute;
        top: .12rem;
        left: 0;
        right: 0;
        width: .64rem;
        height: .23rem;
        z-index: 5;
        margin: auto;
      }

      .options {
        position: absolute;
        right: .195rem;
        top: .12rem;
        z-index: 5;
        display: flex;
        align-items: center;

        i.icon {
          display: inline-block;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;

          &.wx-icon {
            width: .21rem;
            height: .16rem;
            margin-right: .11rem;
            background-image: url("../img/微信@2x.png");
          }

          &.wb-icon {
            width: .22rem;
            height: .17rem;
            margin-right: .115rem;
            background-image: url("../img/微博@2x.png");
          }
        }

        button.lang {
          display: inline-block;
          height: .175rem;
          line-height: .175rem;
          padding: 0 .08rem;
          font-size: .12rem;
          border: .01rem solid #070002;
          border-radius: .02rem;
          background: transparent;
          box-sizing: border-box;

          i.arrow {
            display: inline-block;
            width: 0;
            height: 0;
            border-width: .09rem .08rem 0;
            border-style: solid;
            border-color: #070002 transparent transparent;
            margin-left: .065rem;
          }
        }
      }
    }

    header {
      height: .48rem;
      line-height: .48rem;
      display: flex;
      background-color: #FFFFFF;

      ul.menu-list {
        flex: 1;
        height: inherit;
        overflow: hidden;
        display: flex;
        font-size: .106rem;
        color: #020202;
        font-weight: bold;

        li.menu {
          flex: 1;
          height: 100%;
          text-align: center;

          &.active {
            color: #FAC324;
          }
        }
      }

      .options {
        display: none;
      }
    }

    .main {
      width: 100%;

      .page-title {
        width: 90%;
        margin: .04rem auto;
        display: flex;
        align-items: center;

        span.line {
          flex: 1;
          height: .01rem;
          background: #FAC324;
        }

        h1 {
          color: #020202;
          font-size: .15rem;
          margin: 0 .2rem;
        }
      }

      .item-page-1 {
        width: 100%;
        position: relative;
        background: url("../img/mobile/bg-1@2x.png") no-repeat bottom right;
        background-size: 1.74rem 1.88rem;

        .content {
          width: 54%;
          margin: .2rem auto .275rem;
          font-size: .085rem;
          color: #020202;
          line-height: .19rem;
          text-align: justify;

          p.item-content1 {
            margin-bottom: .25rem;
          }

          span.title {
            font-weight: 500;
          }

          span.text {
            font-weight: 300;
          }
        }

        .code {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: .19rem;

          .item-code {
            width: .53rem;
            margin-right: 12.4%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            &:last-of-type {
              margin: 0;
            }

            img {
              border: .03rem solid #FAC324;
              border-radius: .05rem;
            }

            p {
              font-size: .082rem;
              text-align: center;
              color: #020202;
              line-height: .124rem;
            }
          }
        }

        picture.ad {
          position: absolute;
          left: .16rem;
          top: .62rem;
          width: .58rem;
          height: .85rem;
          margin: auto;
          z-index: 5;
        }
      }

      .item-page-2 {
        width: 100%;
        margin: 0 auto;

        ul.show-list {
          width: 100%;

          li.show {
            width: 100%;
            display: flex;

            .main-img {
              width: 49.5%;
            }

            .main-context {
              width: 50.5%;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              align-content: center;
              justify-content: center;
              text-align: center;
              color: #000000;
              position: relative;

              picture.decoration {
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 5;

                &.decoration-1 {
                  right: .145rem;
                  width: 1.15rem;
                  height: 1.84rem;
                }

                &.decoration-2 {
                  left: .045rem;
                  width: 1.47rem;
                  height: 1.07rem;
                }

                &.decoration-3 {
                  right: .115rem;
                  width: 1.48rem;
                  height: 1.50rem;
                }

                &.decoration-4 {
                  left: .125rem;
                  width: 1.25rem;
                  height: 1.57rem;
                }
              }

              h2 {
                color: #010101;
                font-size: .13rem;
                font-weight: bold;
                margin-bottom: .2rem;
              }

              .text {
                width: 100%;
                color: #000000;
                font-size: .075rem;
                line-height: .15rem;
              }
            }
          }

          li.series {
            margin-top: .285rem;
            padding: 0 .19rem;
            display: flex;
            align-items: center;

            h2 {
              display: inline-block;
              width: .13rem;
              font-size: .13rem;
              color: #000000;
              font-weight: bold;
              margin-right: .19rem;
              text-align: center;
            }

            //&:last-of-type {
            //  h2 {
            //    margin-left: .19rem;
            //    margin-right: 0;
            //  }
            //}
            .series-img {
              flex: 1;
              overflow: hidden;
              padding: .12rem 0 0 .16rem;
              background-position: center;
              background-repeat: no-repeat;
              background-size: 100% 100%;

              &.series-img-1 {
                height: 1.24rem;
                display: flex;
                justify-content: flex-start;
                background-image: url("../img/mobile/小食系列@2x.png");
              }

              &.series-img-2 {
                height: 1.23rem;
                display: flex;
                justify-content: flex-end;
                background-image: url("../img/mobile/鲜果系列@2x.png");
              }

              .series-text {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 58%;
                height: 100%;
                font-size: .055rem;
                color: #000;
                line-height: .09rem;
                text-align: center;
              }
            }
          }
        }
      }

      .item-page-3 {
        width: 100%;
        margin: 0 auto;
        .swiper-container {
          width: 100%;
          //height: 1.85rem;
          font-size: .12rem;
        }
      }

      .item-page-4 {
        width: 100%;
        background: url("../img/mobile/bg-2@2x.png") no-repeat bottom left;
        background-size: 2.8rem 3.1rem;

        .item-page-wrapper {
          width: 71%;
          margin: 0 auto;

          p.call {
            color: #020202;
            font-size: .14rem;
            text-align: center;
            padding: .13rem 0 .135rem;
          }
        }
      }
    }

    footer {
      width: 100%;
      padding: .24rem 0 .28rem;
      background: #FAC324;

      .footer-wrapper {
        width: 50%;
        margin: 0 auto;

        .tips {
          font-size: .085rem;
          color: #020202;
          line-height: .15rem;
          font-weight: 400;
          text-align: center;
        }

        .bottom {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-top: .22rem;

          .code {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: .2rem;

            .item-code {
              width: .62rem;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;

              p {
                font-size: .096rem;
                text-align: center;
                color: #020202;
                line-height: .13rem;
              }

              img {
                border: .03rem solid #FAC324;
                border-radius: .05rem;
              }
            }
          }

          .info {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            font-size: .083rem;
            color: #020202;
            text-align: left;

            p {
              width: 100%;
            }
          }
        }
      }
    }

    .back-top {
      position: fixed;
      bottom: 10%;
      right: 5%;
      z-index: 10;
      width: .35rem;
      display: none;
      flex-wrap: wrap;

      img {
        cursor: pointer;

        &.backTop {
          margin-bottom: 0;
        }

        &.QRcode {
          display: none;
        }
      }

      .wxCode {
        display: none;
      }
    }
  }
}